{% block context %}
{
    "description" : "Product pricing Plans",
    "keywords" : "products,pricing,buy me",
    "plans":[
        {
            "name":"Starter",
            "price":"Free",
            "class":"success",
            "features":[1]
        },
        {
            "name":"Basic",
            "price":"$10 / month",
            "class":"danger",
            "features":[1,2]
        },
        {
            "name":"Enterprise",
            "price":"$20 / month",
            "class":"info",
            "features":[1,2,3]
        }
],
    "features":[
        "Feature #1",
        "Feature #2",
        "Feature #3"
    ]
}
{% endblock %}
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h2>Available Pricing Plans</h2>
        </div>
    </div>
    <div class="row">
        {% for plan in plans %}
            <div class="col-md-4">
                <div class="panel panel-{{ plan.price}} panel-info">
                    <div class="panel-heading">
                        <h4 class="text-center">
                            {{ plan.name }} Plan - {{ plan.price }}
                        </h4>
                    </div>
                    <ul class="list-group list-group-flush text-center">
                        {% for feature in features %}
                            <li class="list-group-item {% if forloop.counter not in plan.features %} disabled {% endif %}">
                                {{ feature }}
                            </li>
                        {% endfor%}
                    </ul>
                    <div class="panel-footer">
                        <a class="btn btn-lg btn-block btn-{{ plan.class }}" href="#">
                            BUY NOW!
                        </a>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
    <div class="row">
        <div class="col-md-12">
            <p>{% lorem %}</p>
        </div>
    </div>
</div>